import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
import './../FastFunctionDrawer.scss';
import { SearchOutlined } from '@ant-design/icons';
import { Input } from 'antd';

const FastThree = () => {

    return (
        <div className='fast-one-page'>
            <Input placeholder="输入功能关键词搜索" prefix={<SearchOutlined />} />
            <div className='fast-one-content'>
                <div className='fast-one-title'>编辑</div>
                <div>快捷键</div>
            </div>
            <div className='fast-one-overflow'>
                <div className='fast-one-item'>
                    <div className='flex-row'>
                        <span className='iconfont-1 ghzs-gray-geshishua'></span>
                        <span style={{marginLeft: 12}}>格式刷</span>
                    </div>
                    <div className='flex-row'>
                        <div className='fast-one-btn'>Shift</div>
                        <div className='fast-one-btn'>Cmd</div>
                        <div className='fast-one-btn'>S</div>
                    </div>
                </div>
                <div className='fast-one-item'>
                    <div className='flex-row'>
                        <span className='iconfont-1 ghzs-gray-fuzhi'></span>
                        <span style={{marginLeft: 12}}>复制</span>
                    </div>
                    <div className='flex-row'>
                        <div className='fast-one-btn'>Shift</div>
                        <div className='fast-one-btn'>Cmd</div>
                        <div className='fast-one-btn'>S</div>
                    </div>
                </div>
                <div className='fast-one-item'>
                    <div className='flex-row'>
                        <span className='iconfont-1 ghzs-gray-xiangpica'></span>
                        <span style={{marginLeft: 12}}>橡皮擦</span>
                    </div>
                    <div className='flex-row'>
                        <div className='fast-one-btn'>Shift</div>
                        <div className='fast-one-btn'>Cmd</div>
                        <div className='fast-one-btn'>S</div>
                    </div>
                </div>
                <div className='fast-one-item'>
                    <div className='flex-row'>
                        <span className='iconfont-1 ghzs-gray-xieti1'></span>
                        <span style={{marginLeft: 12}}>斜体</span>
                    </div>
                    <div className='flex-row'>
                        <div className='fast-one-btn'>Shift</div>
                        <div className='fast-one-btn'>Cmd</div>
                        <div className='fast-one-btn'>S</div>
                    </div>
                </div>
                <div className='fast-one-item'>
                    <div className='flex-row'>
                        <span className='iconfont-1 ghzs-gray-jiacu'></span>
                        <span style={{marginLeft: 12}}>粗体</span>
                    </div>
                    <div className='flex-row'>
                        <div className='fast-one-btn'>Shift</div>
                        <div className='fast-one-btn'>Cmd</div>
                        <div className='fast-one-btn'>S</div>
                    </div>
                </div>
            </div>
        </div>
    )
}


export default forwardRef(FastThree);